import { React, Component } from "react";
import '../assets/css/comment.css'
class Comment extends Component {
    constructor(props) {
        super(props);
    }
    state = {
        name: '',
        content: '',
        val: [
            {
                name: '梦白',
                content: '6'
            }
        ],
    }
    // 评论人Change
    inputChange(e) {
        let val = e.target.value
        this.setState({
            name: val
        })
    }
    // 内容Change
    textChange(e) {
        const vals = e.target.value
        this.setState({
            content: vals
        })
    }
    announce = () => {
        console.log(this.state.name);
        console.log(this.state.content);
        let { name, content } = this.state
        let val = [...this.state.val]
        val.push({ name, content })
        this.setState({
            val,
        })
    }
    render() {
        return (
            <div>
                <div className="outer">
                    <input ref={this.name} onChange={this.inputChange.bind(this)} className="inp" type="text" placeholder="请输入评论人" />
                    <textarea ref={this.content} onChange={this.textChange.bind(this)} rows="10" cols="35" className="area" placeholder="请输入评论内容"></textarea>
                    <button onClick={this.announce} className="btn">发表评论</button>
                    <ul>{
                        this.state.val.map((item, index) => (
                            <div key={index}>
                                <li>{item.name}</li>
                                <span style={{ fontSize: '12px' }}>{item.content}</span>
                            </div>

                        ))
                    }
                    </ul>
                </div>
            </div>
        );
    }
}
export default Comment;